<template>
  <div class="p-4">
    <ChartGroupCard class="enter-y" :loading="loading" type="chart" />
    <SaleTabCard class="!my-4 enter-y" :loading="loading" />
    <Row>
      <Col :span="24">
        <Card :loading="loading" :bordered="false" title="最近一周访问量统计" :style="{ marginTop: '24px' }">
          <Row>
            <Col :span="6">
              <HeadInfo title="今日IP" :content="loginfo.todayIp" icon="environment"></HeadInfo>
            </Col>
            <Col :span="6">
              <HeadInfo title="今日访问" :content="loginfo.todayVisitCount" icon="team"></HeadInfo>
            </Col>
            <Col :span="6">
              <HeadInfo title="总访问量" :content="loginfo.totalVisitCount" icon="rise"></HeadInfo>
            </Col>
          </Row>
          <LineMulti :chartData="lineMultiData" height="50vh" type="line" :option="{ legend: { top: 'bottom' } }"></LineMulti>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Row, Col, Card } from 'ant-design-vue';
import ChartGroupCard from '../components/ChartGroupCard.vue';
import SaleTabCard from '../components/SaleTabCard.vue';
import { HeadInfo, LineMulti } from '@begcode/components';
import { getLoginfo, getVisitInfo } from '../api';

const loading = ref(true);

setTimeout(() => {
  loading.value = false;
}, 500);

const loginfo = ref({});
const lineMultiData = ref([]);

function initLogInfo() {
  getLoginfo(null).then(res => {
    if (res.success) {
      Object.keys(res.result).forEach(key => {
        res.result[key] = res.result[key] + '';
      });
      loginfo.value = res.result;
    }
  });
  getVisitInfo(null).then(res => {
    if (res.success) {
      lineMultiData.value = [];
      res.result.forEach(item => {
        lineMultiData.value.push({ name: item.type, type: 'ip', value: item.ip });
        lineMultiData.value.push({ name: item.type, type: 'visit', value: item.visit });
      });
    }
  });
}

initLogInfo();
</script>

<style lang="less" scoped>
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}

.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }

  p {
    line-height: 42px;
    margin: 0;

    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
</style>
